<template>
  <div class="pageContainer">
    <h3>业务流水</h3>
    <div style="max-width: 1208px;">
      <div style="display: flex;align-items: center;margin-bottom: 16px;margin-top: 32px;flex-wrap: wrap">
        <div class="formItem">
          <div class="label">用户编号:</div>
          <el-input v-model="param.userNo" placeholder="请输入编号" class="inputStyle"></el-input>
        </div>
        <div class="formItem">
          <div class="label">渠道编号:</div>
          <el-input v-model="param.channel" placeholder="请输入渠道编号" class="inputStyle"></el-input>
        </div>
        <div class="formItem" style="margin-right: 0;">
          <div class="label">时间范围:</div>
          <div style="display: flex;flex-wrap: wrap;">
            <el-date-picker
                v-model="param.beginTime"
                style="width: 232px;margin-right: 8px;"
                type="date"
                :picker-options="{
                disabledDate:e =>  (param.endTime && e > new Date(param.endTime)) || e > new Date()
              }"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
            >
            </el-date-picker>
            <el-date-picker
                v-model="param.endTime"
                style="width: 232px;"
                type="date"
                :picker-options="{
                disabledDate:e =>  (param.beginTime && e < new Date(param.beginTime)) || e > new Date()
              }"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>

      </div>
      <div style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;">
        <div style="display: flex;align-items: center;flex-wrap: wrap;">
          <div class="formItem" >
            <div class="label">业务状态:</div>
            <el-select v-model="param.status" class="inputStyle">
              <el-option :value="null" label="全部"></el-option>
              <el-option :value="0" label="待收款"></el-option>
              <el-option :value="1" label="已完成"></el-option>
            </el-select>
          </div>
          <div class="formItem">
            <div class="label">任务名称:</div>
            <el-input v-model="param.mission" placeholder="请输入任务名" class="inputStyle"></el-input>
          </div>
        </div>
        <div style="display: flex;align-items: center;">
          <div class="basicSearchLightBtn" style="margin-right: 8px;" @click="getTableList">
            <img src="@/assets/svg/white-search.svg" />
            <div>查询</div>
          </div>
          <div class="basicSearchBtn" @click="handleReset">
            <img src="@/assets/svg/reset.svg"/>
            <div>重置</div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top:16px;">
      <el-table fit :data="tableData">
          <el-table-column label="任务名" width="350" prop="mission"></el-table-column>
          <el-table-column label="用户编号" prop="userNo"></el-table-column>
          <el-table-column label="用户类型" prop="kind">
<!--            <template slot-scope="{row}">-->
<!--              <div v-if="row.kind == "></div>-->
<!--            </template>-->
          </el-table-column>
          <el-table-column label="时间" prop="createDate"></el-table-column>
          <el-table-column label="总金额" >
            <template slot-scope="{row}">
              <div>¥{{row.money}}</div>
            </template>
          </el-table-column>
          <el-table-column label="待收账款">
            <template slot-scope="{row}">
              <div>¥{{row.receivable}}</div>
            </template>
          </el-table-column>
          <el-table-column label="业务状态 ">
            <template slot-scope="{row}">
              <div v-if="row.status === '0'" style="color: #333333">待收款</div>
              <div v-else style="color: #999999;">已完成</div>
            </template>
          </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
          style="text-align: right;margin-top:20px;"
          @current-change="handleSizeChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import {getTransactionList} from "@/api/money";

export default {
  name:"Business",
  data() {
    return {
      tableData: [],
      date: '',
      pageSize: 12,
      pageNo: 1,
      total: null,
      param: {
        userNo: null,
        channel: null,
        mission: null,
        status: null,
        beginTime: '',
        endTime: ''
      }
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    handleSizeChange(e){
      this.pageNo = e;
      this.getTableList();
    },
    handleReset() {
      this.pageNo = 1;
      this.param = {
        userNo: null,
        channel: null,
        mission: null,
        status: null,
        beginTime: '',
        endTime: ''
      }
      this.getTableList()
    },
    getTableList() {
      const requestParam = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        param: this.param
      }
      getTransactionList(requestParam).then(res => {
        if (res) {
          this.total = res.count
          this.tableData = res.list
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.formItem {
  display: flex;
  align-items: center;
  margin-right: 40px;

  .label {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    margin-right: 4px;
    white-space: nowrap;
  }

  .inputStyle {
    width: 232px;
  }
}

.pageContainer {
  padding: 45px 32px;
}
</style>
